<template>

  <div id="pictureDetailPage">

    <a-row :gutter="[16, 16]" style="margin-top: 26px;">
      <!-- 图片展示区 -->
      <!--      <a-col :sm="24" :md="16" :xl="18">-->
      <a-col style="margin-left: 25%; ">
        <a-card title="图片预览" style="max-width: 600px; padding: 0">
          <a-image
            style="max-height: 600px; object-fit: contain"
            :src="picture.url"
          />
        </a-card>
      </a-col>

      <!-- 图片信息区 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息" style="margin-right: 25%;" >
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
          </a-descriptions>
          <a-space wrap>

            <a-button v-if="canEdit" type="default" @click="doEdit">
              编辑
              <template #icon>
                <EditOutlined />
              </template>
            </a-button>
            <a-button v-if="canEdit" danger @click="doDelete">
              删除
              <template #icon>
                <DeleteOutlined />
              </template>
            </a-button>
            <a-button v-if="canReview" danger @click="handleReview(PIC_REVIEW_STATUS_ENUM.REJECT)">
              下架
              <template #icon>
                <DeleteOutlined />
              </template>
            </a-button>

            <a-button type="primary"  @click="doDownload"  >
              免费下载
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>

          </a-space>

        </a-card>
      </a-col>
    </a-row>

  </div>
</template>


<script setup lang="ts">

// props获取动态路由参数 id
import { computed, createVNode, onMounted, ref } from 'vue'
import { EditOutlined, DeleteOutlined, ExclamationCircleOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import {
  deletePictureByIdUsingPost,
  doPictureReviewUsingPost,
  getPictureVoByIdUsingGet
} from '@/api/pictureController.ts'
import { message, Modal } from 'ant-design-vue'
import '@/utils'
import { formatSize } from '@/utils'
import { downloadImage } from '@/utils'
import '@/stores/useLoginUserStore.ts'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { useRouter } from 'vue-router'
import { PIC_REVIEW_STATUS_ENUM } from '@/constants/picture.ts'

const props = defineProps<{ id: string | number }>()

const picture = ref<API.PictureVO>({})

const fetchPictureDetail = async () => {

  const res = await getPictureVoByIdUsingGet({
    id: props.id
  })
  if (res.data.code === 0 && res.data.data) {
    picture.value = res.data.data
  } else {
    message.success('获取图片详情失败' + res.data.message)
  }
}


const loginUserStore = useLoginUserStore()
// 是否具有编辑权限
const canEdit = computed(() => {
  const loginUser = loginUserStore.loginUser
  // 未登录不可编辑
  if (!loginUser.id) {
    return false
  }
  // 仅本人或管理员可编辑
  const user = picture.value.user || {}
  return loginUser.id === user.id || loginUser.userRole === 'admin'
})

const canReview = computed(() => {
  const loginUser = loginUserStore.loginUser
  // 未登录不可编辑
  if (!loginUser.id) {
    return false
  }
  return loginUser.userRole === 'admin'
})

const router = useRouter()
const doDelete = async () => {

  Modal.confirm({
    title: '是否删除该图片',
    icon: createVNode(ExclamationCircleOutlined),
    content: '系统提示',
    okText: '确认',
    okType: 'danger',
    cancelText: '取消',
    async onOk() {
      const res = await deletePictureByIdUsingPost({
        id: props.id
      })
      if (res.data.code === 0) {
        message.success('删除成功')
        router.push({
          path: '/'
        })
      }
    },
    onCancel() {
    }
  })
}

// 编辑
const doEdit = () => {
  router.push('/add_picture?id=' + picture.value.id)
}
// 处理下载
const doDownload = () => {
  downloadImage(picture.value.url)
}

const handleReview = async (reviewStatus: number) => {
  const id = props.id
  const reviewMessage = '管理员审核拒绝'
  if (id === null) return
  Modal.confirm({
    title: '是否下架该图片',
    icon: createVNode(ExclamationCircleOutlined),
    content: '系统提示',
    okText: '确认',
    okType: 'danger',
    cancelText: '取消',
    async onOk() {
      const res = await doPictureReviewUsingPost({
        id: id,
        reviewStatus: reviewStatus,
        reviewMessage: reviewMessage
      })

      if (res.data.code === 0 && res.data.data) {
        message.success('下架成功！')
        router.push({
          path: '/'
        })
      } else {
        message.error('下架失败' + res.data.message)
      }

    },
    onCancel() {
    }
  })
}


onMounted(() => {
  fetchPictureDetail()
})
</script>
<style scoped>

</style>
